<!--可提成订单模板 -->
<template>
  <div class="main section clearfix">
    <!-- 筛选表单! -->
    <el-form
      :model="query"
      ref="query"
      label-width="120px"
      class="query clearfix"
    >
      <el-form-item label="关键词:" prop="keyWord">
        <el-input v-model="query.keyWord"></el-input>
      </el-form-item>
      <el-form-item label="归属公司:" prop="firmId">
        <el-select
          v-model="query.firmId"
          placeholder="请选择"
          @change="companyChange"
        >
          <el-option
            v-for="item in companyData"
            :key="item.id"
            :label="item.companyName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="归属部门:" prop="deptId">
        <treeselect
          :options="deptData"
          :clearable="false"
          v-model="query.deptId"
          :normalizer="normalizer"
          @select="handleNodeClick"
          placeholder="请选择部门"
          noOptionsText="请先选择归属公司"
        />
      </el-form-item>
      <el-form-item label="归属人员:" prop="employeeId">
        <el-select v-model="query.employeeId" placeholder="请选择">
          <el-option
            v-for="item in personnelData"
            :key="item.id"
            :label="item.employeeName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="归属人员类型:" prop="employeeTypeId">
        <el-select v-model="query.employeeTypeId" placeholder="请选择">
          <el-option
            v-for="item in personnelTypeData"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="渠道人员:" prop="channelName">
        <el-input v-model="query.channelName"></el-input>
      </el-form-item> -->
      <div class="wrap">
        <el-form-item label="渠道人员金额:" prop="commissionMoneyMin">
          <el-input
            v-model="query.commissionMoneyMin"
            class="minInput"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="40px" label="至" prop="commissionMoneyMax">
          <el-input
            v-model="query.commissionMoneyMax"
            class="minInput"
          ></el-input>
        </el-form-item>
      </div>
      <!-- <el-form-item label="推广员:" prop="generalizeName">
        <el-input v-model="query.generalizeName"></el-input>
      </el-form-item> -->

      <!-- <el-form-item label="经纪人提成:" prop="brokerMoneyMin">
          <el-input v-model="query.brokerMoneyMin" class="minInput"></el-input>
        </el-form-item> -->
      <el-form-item label="提成人:" prop="commissionName">
        <el-input v-model="query.commissionName"></el-input>
      </el-form-item>
      <el-form-item label="提成类型:" prop="commissionType">
        <el-select v-model="query.commissionType" placeholder="请选择">
          <el-option
            v-for="item in commissionTypes"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label-width="40px" label="至" prop="brokerMoneyMax">
          <el-input v-model="query.brokerMoneyMax" class="minInput"></el-input>
        </el-form-item> -->

      <el-form-item label="核算日期:" prop="closeTime">
        <el-date-picker
          v-model="query.closeTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 210px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发放日期:" prop="grantTime">
        <el-date-picker
          v-model="query.grantTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 210px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="释放状态:" prop="calState">
        <el-select v-model="query.calState" placeholder="请选择">
          <el-option
            v-for="item in calState"
            :key="item.id"
            :label="item.itemText"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="button">
        <el-button type="danger" @click="emptyFun" v-no-more-click
          >清空</el-button
        >
        <el-button type="primary" @click="print" v-no-more-click
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <div class="box">
      <p class="tips">
        <span>*温馨提醒：</span
        >已发放数据仅能通过导出表添加发放数值及状态后回导进系统更新，以防止人为操作失误以及无数据备档。
      </p>
      <p class="button">
        <el-button
          @click="exportDept"
          type="primary"
          size="small"
          v-no-more-click
          v-if="userInfoExport"
        >
          +导出</el-button
        >
        <el-upload
          class="upload-demo"
          :action="exportInUrl"
          :headers="parmas"
          :on-progress="showLoading"
          :on-success="closeLoading"
          accept=".xlc,.xlm,.xls,.xlt,.xlw"
        >
          <el-button
            size="small"
            type="primary"
            v-no-more-click
            v-if="userInfoImport"
            >+导入</el-button
          >
        </el-upload>
      </p>
    </div>
    <!-- 可提成订单表格! -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      :row-key="getRowKey"
      @selection-change="changeFun"
      ref="commissionForm"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="36"
        class-name="checkBox"
      ></el-table-column>
      <el-table-column
        fixed="left"
        prop="orderNumber"
        align="center"
        label="业务单号"
        min-width="200"
      >
      </el-table-column>
      <el-table-column
        prop="productName"
        align="center"
        label="产品类型"
        min-width="120"
      >
      </el-table-column>
      <el-table-column
        prop="borrowerName"
        :show-overflow-tooltip="true"
        align="center"
        label="客户名称"
      >
      </el-table-column>
      <el-table-column
        prop="sumMoney"
        :show-overflow-tooltip="true"
        align="center"
        label="订单收入"
      >
      </el-table-column>
      <el-table-column
        prop="closeMoney"
        :show-overflow-tooltip="true"
        align="center"
        label="核算收入"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="proportion"
        :show-overflow-tooltip="true"
        align="center"
        label="提成比例"
      >
      </el-table-column> -->
      <el-table-column
        prop="commissionName"
        :show-overflow-tooltip="true"
        align="center"
        label="提成人"
      >
      </el-table-column>
      <el-table-column
        prop="commissionType"
        :show-overflow-tooltip="true"
        align="center"
        label="提成类型"
      >
      </el-table-column>
      <el-table-column
        prop="commissionMoney"
        :show-overflow-tooltip="true"
        align="center"
        label="提成金额"
      >
      </el-table-column>
      <el-table-column
        prop="commissionFor"
        align="center"
        width="120"
        label="佣金收取"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.commissionFor == 1">一次性</span>
          <span v-if="scope.row.commissionFor == 0">分期中</span>
        </template>
      </el-table-column>
      <el-table-column prop="stages" align="center" width="70" label="期数">
      </el-table-column>
      <el-table-column
        prop="belongCompanyName"
        align="center"
        width="270"
        label="归属公司"
      >
      </el-table-column>
      <el-table-column
        prop="belongDeptName"
        :show-overflow-tooltip="true"
        align="center"
        label="归属部门"
      >
      </el-table-column>
      <el-table-column
        prop="belongEmployeeName"
        :show-overflow-tooltip="true"
        align="center"
        label="归属人员"
      >
      </el-table-column>
      <el-table-column
        prop="belongEmployeeTypeName"
        :show-overflow-tooltip="true"
        align="center"
        label="归属人员类型"
      >
      </el-table-column>

      <!-- <el-table-column
        prop="channelDeptName"
        :show-overflow-tooltip="true"
        align="center"
        label="渠道人员部门"
      >
      </el-table-column>
      <el-table-column
        prop="channelName"
        :show-overflow-tooltip="true"
        align="center"
        label="渠道人员"
      >
      </el-table-column>
      <el-table-column
        prop="trenchTypeName"
        :show-overflow-tooltip="true"
        align="center"
        label="渠道人员类型"
      >
      </el-table-column>
      <el-table-column
        prop="chanelStr"
        :show-overflow-tooltip="true"
        align="center"
        label="渠道人员提成类型"
      >
      </el-table-column>
      <el-table-column
        prop="channelMoney"
        :show-overflow-tooltip="true"
        align="center"
        label="渠道提成金额"
      >
      </el-table-column>
      <el-table-column
        prop="haveTeam"
        :show-overflow-tooltip="true"
        align="center"
        label="提交时是否已有团队"
      >
      </el-table-column>
      <el-table-column
        prop="partnerName"
        :show-overflow-tooltip="true"
        align="center"
        label="团队上级"
      >
      </el-table-column>
      <el-table-column
        prop="brokerMoney"
        :show-overflow-tooltip="true"
        align="center"
        label="经纪人奖金"
      >
      </el-table-column>
      <el-table-column
        prop="generalizeName"
        :show-overflow-tooltip="true"
        align="center"
        label="推广员"
      >
      </el-table-column>
      <el-table-column
        prop="generalizeSellMoney"
        :show-overflow-tooltip="true"
        align="center"
        label="推广员提成"
      >
      </el-table-column> -->
      <el-table-column
        prop="authName"
        :show-overflow-tooltip="true"
        align="center"
        label="核算人"
      >
      </el-table-column>
      <el-table-column
        prop="closeTime"
        align="center"
        label="核算日期"
        width="96"
      >
      </el-table-column>
      <el-table-column
        prop="grantName"
        :show-overflow-tooltip="true"
        align="center"
        label="发放人"
      >
      </el-table-column>
      <el-table-column
        prop="grantTime"
        align="center"
        label="发放日期"
        width="96"
      >
      </el-table-column>
      <el-table-column
        prop="calculationState"
        :show-overflow-tooltip="true"
        align="center"
        :formatter="accountTranslation"
        label="提成状态"
      >
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120" align="center">
        <template slot-scope="scope">
          <el-popconfirm
            title="确定取消此核算吗？"
            @onConfirm="cancleCal(scope.row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              v-if="scope.row.calculationState == 1"
              v-no-more-click
              >取消核算</el-button
            >
          </el-popconfirm>

          <el-button
            type="text"
            size="small"
            @click="rewOrder(scope.row)"
            v-no-more-click
            >查看订单</el-button
          >
          <!-- <el-popover
            v-if="visible.length"
            placement="top"
            width="120"
            :v-model="visible[scope.$index]"
            @hide="issueButton(scope.$index, 0)"
          >
            <p>请输入授权码:</p>
            <input
              type="password"
              style="border: 2px solid #ccc; width: 120px"
              v-model="shouquanma"
            />
            <div style="text-align: right; margin: 0">
              <el-button type="primary" size="mini" @click="popoverClick(scope)"
                >提交</el-button
              >
            </div>
            <el-button
              slot="reference"
              type="text"
              @click="issueButton(scope.$index, 1)"
              v-if="issue && scope.row.calculationState == 1"
              >发放</el-button
            >
          </el-popover> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        :page-size="pagesize"
        :current-page.sync="currentPage"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  pagelist,
  getDepartment,
  postCompanyEmployList,
  getEmployee,
  getCalList,
  cancleCal,
  getTbleadgUrl,
  // issueButton,
  commissionType, //可提成订单数据筛选.提成类型!
} from "../../../src/assets/js/api";
import { expotOut, GMTToStr, checkPermiss } from "../../assets/js/utlis";
export default {
  name: "Commission",
  components: { Treeselect },
  data() {
    return {
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
      },
      exportInUrl: "",
      issue: null,
      accountingState: null,
      query: {
        keyWord: null, //关键词搜索!
        firmId: null, //归属公司!
        deptId: null, //归属部门!
        employeeId: null, //归属人员!
        employeeTypeId: null, //归属人员类型!
        generalizeMoneyMin: null,
        generalizeMoneyMax: null,
        grantMoneyMin: null,
        grantMoneyMax: null,
        brokerMoneyMin: null,
        brokerMoneyMax: null,
        commissionMoneyMax: null, //渠道人员最大金额!
        commissionMoneyMin: null, //渠道人员最小金额!
        grantTime: null, //发放日期!
        closeTime: null, //核算日期!
        calState: null, //释放状态!
        channelName: null,
        generalizeName: null,
        commissionName: null, //提成人!
        commissionType: null, //提成人类型!
      },
      //提成类型!
      commissionTypes: [],
      //导出订单id
      orderExportId: [],
      currentPage: 1,
      // 公司数据
      companyData: [],
      // 部门数据
      deptData: [],
      // 人员数据
      personnelData: [],
      // 人员类型
      personnelTypeData: [],
      //释放类型
      queryPersonnel: [],
      calState: [],
      //发放状态
      releaseStatus: [],
      tableData: [],
      pagesize: 10,
      total: 10,
      pages: 0,
      visible: [],
      parmas: {
        COOKIE_TOKEN: "",
      },
      shouquanma: null,
      golbalPermissions: [],
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.exportInUrl = `${this.axios.defaults.baseURL}/business/calculation/exportImport`;
    //获取token
    let token = localStorage.getItem("token");
    this.parmas.COOKIE_TOKEN = token;

    this.companylist();
    this.getcalculation();
    this.personnelType();
    this.getList(this.query);
    this.commissionType(); //可提成订单类型!
  },
  computed: {
    // 导出按钮权限!
    userInfoExport: function () {
      return checkPermiss(
        "business:calculation:exportExtract",
        this.golbalPermissions
      );
    },
    // 导入按钮权限!
    userInfoImport: function () {
      return checkPermiss(
        "business:calculation:exportImport",
        this.golbalPermissions
      );
    },
  },
  watch: {
    total: function () {
      if (
        this.total == (this.query.pageNo - 1) * this.pagesize &&
        this.total != 0
      ) {
        this.query.pageNo -= 1;
        this.getList(this.query); //获取列表数据
      }
    },
    visible(nv) {
      console.log(nv);
    },
  },
  methods: {
    // 获取可提成订单类型!
    commissionType() {
      commissionType().then((res) => {
        this.commissionTypes = res.data;
      });
    },
    //获取表格数据
    getList(obj) {
      let querryData = JSON.parse(JSON.stringify(obj));
      //核算日期
      if (querryData.closeTime && querryData.closeTime[0]) {
        querryData.closeTimeMin = GMTToStr(querryData.closeTime[0]);
        querryData.closeTimeMax = GMTToStr(querryData.closeTime[1]);
      }
      //发放日期
      if (querryData.grantTime && querryData.grantTime[0]) {
        querryData.grantTimeMin = GMTToStr(querryData.grantTime[0]);
        querryData.grantTimeMax = GMTToStr(querryData.grantTime[1]);
      }
      delete querryData.grantTime;
      delete querryData.closeTime;
      getCalList(querryData).then((res) => {
        this.issue = res.data.isFinance;
        this.tableData = res.data.data.records;
        for (var i = 0; i < this.tableData.length; i++) {
          this.visible[i] = false;
        }
        this.pagesize = res.data.data.size;
        this.query.pageNo = res.data.data.current;
        this.total = res.data.data.total;
        this.pages = res.data.data.pages;
      });
    },
    //查看订单
    rewOrder(obj) {
      let orderNumber = obj.orderNumber;
      getTbleadgUrl({
        orderNumber,
      }).then((res) => {
        if (res.code == 200 && res.data != null) {
          //待放款页面
          //let tbleadgUrl = res.data.lendingUrl;
          //归档页面
          let lendgUrl = res.data.pigeonholeUrl;
          if (obj.orderStatus == 4) {
            //跳转已放款页面
            sessionStorage.setItem("orderNumber", obj.orderNumber);
            sessionStorage.setItem("prductId", obj.productId);
            this.$router.push({
              path: res.data.alreadyUrl, //已放款
            });
          } else if (obj.orderStatus == 5) {
            //跳转已归档页面
            sessionStorage.setItem("orderNumber", obj.orderNumber);
            sessionStorage.setItem("prductId", obj.productId);
            this.$router.push(lendgUrl);
          }
        }
      });
    },

    // 发放按钮!
    // issueButton(obj, type) {
    //   if (type) this.$set(this.visible, obj, true);
    //   else this.$set(this.visible, obj, false);
    // },

    // popoverClick(e) {
    //   this.$set(this.visible, e.$index, false);
    //   let { belongId, orderNumber } = e.row;
    //   this.$confirm("此操作将会执行, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   }).then(() => {
    //     issueButton({
    //       belongId: belongId,
    //       orderNum: orderNumber,
    //       pass: this.shouquanma
    //     }).then(res => {
    //       console.log(res);
    //       let message = res.message;
    //       if (res.code == 200) {
    //         this.$message({
    //           type: "success",
    //           message: message
    //         });
    //       } else {
    //         this.$message({
    //           type: "error",
    //           message: message
    //         });
    //       }
    //     });
    //     // console.log({ appid: id, orderNum: orderNumber, pass: this.shouquanma })
    //   });
    // },
    //搜索按钮
    print() {
      this.query.pageNo = 1;
      this.getList(this.query);
      this.currentPage = 1;
    },

    //取消核算
    cancleCal(obj) {
      let that = this;
      cancleCal({
        orderNumber: obj.orderNumber,
        calculationState: 0,
        belongId: obj.belongId,
      }).then((res) => {
        if (res.code == 200) {
          that.$message.success(res.message);
          that.getList(this.query);
        } else {
          that.$message.error(res.message);
        }
      });
    },
    // 归属公司
    companylist() {
      pagelist().then((res) => {
        this.companyData = res.data;
      });
    },
    // 通过选中公司id查询部门
    companyChange(val) {
      this.query.firmId = val;
      this.query.deptId = null;
      this.queryPersonnel.firmId = val;
      getDepartment(val).then((res) => {
        this.deptData = res.data;
      });
      this.postCompanyEmployList(this.queryPersonnel);
    },
    // 获取部门id
    handleNodeClick(data) {
      this.query.deptId = data.id;
      this.queryPersonnel.deptId = data.id;
      this.postCompanyEmployList(this.queryPersonnel);
    },
    // 获取归属人员数据
    postCompanyEmployList() {
      postCompanyEmployList(this.queryPersonnel).then((res) => {
        this.personnelData = res.data;
      });
    },
    // 人员类型
    personnelType() {
      getEmployee("emp_type").then((res) => {
        this.personnelTypeData = res.data;
      });
    },
    // 归属人员类型翻译
    translaPersonnel(row) {
      return this.selectDictLabel(this.personnelTypeData, row.belongType);
    },
    //获取释放状态
    getcalculation() {
      getEmployee("calculation_state").then((res) => {
        let arr = res.data;
        let arr0 = [{ id: null, itemText: "不限" }];
        arr.map((item) => {
          item.id = parseInt(item.itemValue);
        });
        this.calState = arr0.concat(arr);
      });
    },
    // 状态翻译
    accountTranslation(row) {
      return this.selectDictLabel(this.calState, row.calculationState);
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList(this.query);
    },
    handleSizeChange(psize) {
      this.query.pageNo = psize;
      this.getList(this.query);
    },
    // 清空按钮
    emptyFun() {
      this.$refs.query.resetFields();
      this.query.pageNo = 1;
      this.getList(this.query);
      this.currentPage = 1;
    },
    // 批量
    getRowKey(row) {
      return row.id;
    },
    changeFun(val) {
      this.orderExportId = val.map((item) => item.id);
    },
    //导出按钮!
    exportDept() {
      let fileParmas = this.query;
      //核算日期
      if (fileParmas.closeTime && fileParmas.closeTime[0]) {
        fileParmas.closeTimeMin = GMTToStr(fileParmas.closeTime[0]);
        fileParmas.closeTimeMax = GMTToStr(fileParmas.closeTime[1]);
      }
      //发放日期f
      if (fileParmas.grantTime && fileParmas.grantTime[0]) {
        fileParmas.grantTimeMin = GMTToStr(fileParmas.grantTime[0]);
        fileParmas.grantTimeMax = GMTToStr(fileParmas.grantTime[1]);
      }
      delete fileParmas.grantTime;
      delete fileParmas.closeTime;
      delete fileParmas.pageNo;
      if (this.orderExportId) {
        fileParmas.idList = this.orderExportId;
      } else {
        fileParmas.idList = null;
      }
      expotOut(
        "post",
        "/business/calculation/exportExtract",
        fileParmas, // 导出请求参数
        "可提成订单信息列表" // 导出文件名字
      );
    },
    //点击选择文件触发的事件，触发input的click事件
    exportIn() {
      this.$refs.fileBtn.dispatchEvent(new MouseEvent("click"));
    },
    //上传文件
    showLoading() {
      this.loading(true);
    },
    closeLoading(file) {
      this.loading(false);
      this.$message.success(file.message);
    },
    //遮罩函数
    loading(status) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (!status) {
        loading.close();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.el-form-item
{
    line-height: 32px;  float: left;  height: 32px;  margin-bottom: 15px;
}
.query ::v-deep.el-input__icon
{
    line-height: 24px;
}
.wrap
{
    float: left;
}
::v-deep .el-form-item__label,
::v-deep .el-form-item__content
{
    line-height: 32px;  height: 32px;
}
::v-deep .vue-treeselect
{
    width: 210px;
}
::v-deep .query .el-input__inner
{
    line-height: 32px;  width: 210px;
}
::v-deep .el-form-item__content
{
    line-height: 0;  text-align: left;
}
::v-deep .vue-treeselect__control
{
    height: 32px;
}
.minInput
{
    width: 85px;
    ::v-deep .el-input__inner
    {
        width: 100%;
    }
}
.minBox
{
    ::v-deep .el-form-item__label
    {
        line-height: 32px;  width: 40px !important;
    }
    ::v-deep .el-form-item__content
    {
        margin-left: 0 !important;
    }
}
::v-deep .el-upload-list
{
    display: none;
}
::v-deep .upload-demo
{
    display: inline-block;  margin-left: 10px;
}
.box
{
    p
    {
        margin-top: 10px;  padding: 5px 10px;  text-align: left;  background: rgba(242, 242, 242, 1);
    }
    span
    {
        color: red;
    }
}
::v-deep .el-date-editor .el-range-separator
{
    line-height: 25px;
}
::v-deep .el-table td
{
    padding: 10px 0;
}
::v-deep .el-table th
{
    padding: 10px 0;
}
::v-deep .el-form--inline .el-form-item__content
{
    line-height: 32px;  width: 210px;
}
::v-deep .el-input__inner
{
    height: 32px;
}
::v-deep .el-input__icon
{
    line-height: 32px;
}
::v-deep .button .el-button
{
    line-height: 0;  width: 80px;  height: 32px;
}
::v-deep .el-table th > .cell
{
    font-size: 14px;  font-weight: bold;  color: #333;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td
{
    background: rgba(59, 157, 248, .1);
}
.main
{
    position: relative;  padding-bottom: 50px;
}
::v-deep .el-pagination
{
    position: absolute;  right: 0;  margin-top: 20px;  padding: 0;
}
::v-deep .el-pagination__total
{
    visibility: hidden;
}
.title
{
    font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;  position: absolute;  top: 20px;  left: 0;  color: rgba(51, 51, 51, 1);
}

</style>
